<template>
  <div class="m-bg">
    <SvgIcon icon-class="return" class="back-icon fs-45 z-out" @goPage="$utils.back($route.path)" />
    <div :class="plateTypeActive == 4 || plateTypeActive == 5 ? 'fixation1' :plateTypeActive == 3?'fixation3':'fixation'">
      <!--板式1-->
      <div class="bg-white fw-400 scale h-all" ref="imgContent1" v-show="plateTypeActive == 1">
        <div class="flex-s-c plr-42 ptb-24">
          <p class="fs-24" v-if="posterFormat.DateShow">{{ day }} {{ week }}</p>
          <div class="mt--20" v-if="posterFormat.AllSignInDateShow">
            签到天数 <span class="fs-48 fw-b"> {{ data.SignCount }} </span>天
          </div>
        </div>
        <div class="pos-r mlr-32 pd-10 pb-38 pt-0">
          <div class="pos-a left-40 top-40 z-out flex-d-c flex-center">
            <div class="m_logo" v-if="posterFormat.EnterpriseLogoShow"><img :src="shopLogo64" crossOrigin="anonymous"/></div>
            <p class="color-white pt-5 w144 fs-24" v-if="posterFormat.EnterpriseShow">{{data.ShopName}}</p>
          </div>
          <div class="pos-r boxshaw">
            <div class="pos-a frame"></div>
            <div class="plate_type_bg1">
              <img :src="bgShow" alt="" crossOrigin="anonymous">
            </div>
          </div>
          <div class="pb-10 pt-20 flex-s-c">
            <p class="fs-32 fw-500 lh-42 flex-center pl-10 h129 cssjustify" :class="(posterFormat.QrcodeShow && (copydesc && copydesc.length > 45))?'lineheight1':''" :style="'color:' + fontColor">{{ copydesc }}</p>
            <img :src="bgewm?bgewm:ewm" class="ewm2"  crossOrigin="anonymous" v-if="posterFormat.QrcodeShow"/>
          </div>
          <div class="flex-s-c user1 mt-20 pl-22 pr-36">
            <div class="flex-v-c" v-if="(data.Images && posterFormat.AvatarShow) || (data.NickName && posterFormat.NickNameShow)">
              <img :src="head64" class="img-box flex-s-0 pos-r br-full mr-10 is-90" crossOrigin="anonymous" v-if="data.Images && posterFormat.AvatarShow"/>
              <div v-if="data.NickName && posterFormat.NickNameShow">
                <p class="fs-28">{{ data.NickName }}</p>
                <p class="fs-24 color-gray-light w360 ">{{ data.SelfIntroduce }}</p>
              </div>
            </div>
            <div class="flex-d-c flex-center" v-if="posterFormat.SignInDateShow">
              <div class="fs-20">今日签到</div>
              <div class="fs-48 fw-b">{{ time ? time:currentTime }}</div>
            </div>
          </div>
        </div>
      </div>
      <!--板式2-->
      <div class="bg-white scale" ref="imgContent2" v-show="plateTypeActive == 2">
        <div class="pos-r">
          <!-- <img src="@/assets/images/hsy-logo.png" class="pos-a right-20 top-50 m_logo z-out" /> -->
          <div class="pos-a left-40 top-40 z-out flex-d-c flex-center" >
            <div class="m_logo" v-if="posterFormat.EnterpriseLogoShow"><img :src="shopLogo64" crossOrigin="anonymous"/></div>
            <p class="color-white pt-5 w144 fs-24" v-if="posterFormat.EnterpriseShow">{{data.ShopName}}</p>
          </div>
          <div class="plate_type_bg2"><img :src="bgShow" alt="" crossOrigin="anonymous"></div>
          <div class="flex-s-c user pos-r mlr-36 btlr-16 btrr-16" v-if="data.Images && posterFormat.AvatarShow">
            <div class="flex">
              <div class="flex-center mlr-15">
                <img :src="head64" class="img-box pos-r br-full is-90" crossOrigin="anonymous"/>
              </div>
              <div class="flex-d-c flex-h-c" v-if="data.NickName && posterFormat.NickNameShow">
                <p class="fs-28 fw-500">{{ data.NickName }}</p>
                <p class="fs-24 fw-500">{{ data.SelfIntroduce }}</p>
              </div>
            </div>
            <div class="flex-d-c flex-center pr-20 pb-10">
              <div class="pt-10 fs-24 fw-500 mb--12" v-if="posterFormat.DateShow">{{ day1 }}</div>
              <div class="pt-10 fs-24 fw-500" v-if="posterFormat.DateShow">{{ week }}</div>
            </div>
          </div>
          <div class="plr-40">
            <p class="fs-32 fw-b h96 mt-50 mb-40 cssjustify" :style="'color:' + fontColor">{{ copydesc }}</p>
            <div class="flex-s-c pb-60 fw-400">
              <div class="signin_time">
                <div class="flex-s-c">
                  <div class="flex" v-if="posterFormat.AllSignInDateShow">
                    <p class="fs-24 pr-10">签到天数</p>
                    <span class="fs-48 fw-b">{{ data.SignCount }}<font class="fs-24 pl-10">天</font></span>
                  </div>
                  <div class="flex" v-if="posterFormat.SignInDateShow">
                    <p class="fs-24">今日签到</p>
                    <span class="fs-48 fw-b pl-10">{{ time ? time:currentTime }}</span>
                  </div>
                </div>
              </div>
              <div>
                <img :src="bgewm?bgewm:ewm" class="ewm" crossOrigin="anonymous" v-if="posterFormat.QrcodeShow"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--板式3-->
      <div class="bg-white pos-r scale" ref="imgContent3" v-show="plateTypeActive == 3">
        <div class="flex pos-r ml-32 ptb-24">
          <div class="flex-center mr-15" v-if="data.Images && posterFormat.AvatarShow">
            <img :src="head64" class="img-box pos-r br-full is-90" crossOrigin="anonymous"/>
          </div>
          <div class="flex-d-c flex-h-c" v-if="data.NickName && posterFormat.NickNameShow">
            <p class="fs-28 fw-500 w400">{{ data.NickName }}</p>
            <p class="fs-24 fw-400 w360">{{ data.SelfIntroduce }}</p>
          </div>
        </div>
        <div class="sign_in3 flex-d-c flex-s-c pos-a z-out right-20 top-24">
          <div class="flex-d-c flex-center" v-if="posterFormat.AllSignInDateShow">
            <p class="fs-24 fw-500 pt-10">签到天数</p>
            <span class="fs-48 fw-b">{{ data.SignCount }}<font class="fs-24 fw-500 pl-5">天</font></span>
          </div>
          <div class="line" v-if="posterFormat.SignInDateShow && posterFormat.AllSignInDateShow && data.SignTime"></div>
          <div class="flex-d-c flex-center" v-if="posterFormat.SignInDateShow">
            <p class="fs-24 fw-500 pt-10">今日签到</p>
            <span class="fs-48 fw-b">{{ time ? time:currentTime }}</span>
          </div>
        </div>
        <div class="pos-r w670">
          <div class="plate_type_bg3"><img :src="bgShow" alt="" crossOrigin="anonymous"></div>
          <div class="pos-a right-30 bottom-30 z-out flex-d-c flex-center" >
            <div class="m_logo" v-if="posterFormat.EnterpriseLogoShow"><img :src="shopLogo64" crossOrigin="anonymous"/></div>
            <p class="color-white pt-5 w144 fs-24" v-if="posterFormat.EnterpriseShow">{{data.ShopName}}</p>
          </div>
        </div>
        <div class="flex-s-fs pb-50 ml-32 mr-40 mt-32">
          <div>
            <p class="fs-32 fw-500 h96 cssjustify" :style="'color:' + fontColor">{{ copydesc }}</p>
            <div v-if="posterFormat.DateShow" class="fs-24 fw-400 pt-10" style="white-space: nowrap;">{{day1}} {{week}}</div>
          </div>
          <img :src="bgewm?bgewm:ewm" class="ewm2" crossOrigin="anonymous" v-if="posterFormat.QrcodeShow"/>
        </div>
      </div>
      <!--板式 4-->
      <div class="pos-r color-white mt-40 scale1" ref="imgContent4" v-show="plateTypeActive == 4">
        <div class="shade"></div>
        <div class="plate_type_bg2"><img :src="bgShow" alt="" crossOrigin="anonymous"></div>
        <div class="flex pos-a top-35 left-40 z-out">
          <div class="flex-center mr-15" v-if="data.Images && posterFormat.AvatarShow">
            <img :src="head64" class="img-box pos-r br-full bd-white is-90" crossOrigin="anonymous"/>
          </div>
          <div class="flex-d-c flex-h-c" v-if="data.NickName && posterFormat.NickNameShow">
            <p class="fs-28 w400">{{ data.NickName }}</p>
            <p class="fs-24  w400">{{ data.SelfIntroduce }}</p>
          </div>
        </div>
        <div class="pos-a top-175 left-40 z-out">
          <p class="fs-24 fw-400 pt-10" v-if="posterFormat.AllSignInDateShow">签到天数</p>
          <span class="fs-24" v-if="posterFormat.AllSignInDateShow"><span class="fs-52 fw-b">{{ data.SignCount }}</span> 天</span>
          <p class="fs-24 pt-36" v-if="posterFormat.SignInDateShow">今日签到</p>
          <span class="fs-52 fw-b" v-if="posterFormat.SignInDateShow">{{ time ? time:currentTime }}</span>
        </div>
        <div class="pos-a top-0 right-40 time4 z-out" v-if="posterFormat.DateShow">
          <div class="fs-48 fw-400">{{ daynum }}</div>
          <div class="fs-24 fw-400 bb-white">{{ day5 }}</div>
          <div class="fs-24 fw-400">{{ week }}</div>
        </div>
        <div class="pos-a bottom-40 left-0 z-out" style="width:100%">
          <div class="mlr-40 flex-fe-c pb-24">
            <div class="flex-d-c flex-center">
              <div class="m_logo" v-if="posterFormat.EnterpriseLogoShow"><img :src="shopLogo64" crossOrigin="anonymous"/></div>
              <p class="color-white pt-5 w144 fs-24" v-if="posterFormat.EnterpriseShow">{{data.ShopName}}</p>
            </div>
          </div>
          <div class="flex-s-c mlr-40">
            <p class="fs-32 fw-500 w500 h143 cssjustify" :style="'color:' + fontColor">{{ copydesc }}</p>
            <img :src="bgewm?bgewm:ewm" class="ewm" crossOrigin="anonymous" :class="posterFormat.QrcodeType==1?'br2':''" v-if="posterFormat.QrcodeShow"/>
          </div>
        </div>
      </div>
      <!--板式 5-->
      <div class="pos-r color-white mt-40 scale1" ref="imgContent5" v-show="plateTypeActive == 5">
        <div class="shade"></div>
        <div class="plate_type_bg2"><img :src="bgShow" alt="" crossOrigin="anonymous"></div>
        <div class="flex pos-a top-32 left-32 z-out">
          <div class="flex-center mr-15" v-if="data.Images && posterFormat.AvatarShow">
            <img :src="head64" class="img-box pos-r br-full bd-white is-90" crossOrigin="anonymous"/>
          </div>
          <div class="flex-d-c flex-h-c" v-if="data.NickName && posterFormat.NickNameShow">
            <p class="fs-28 w400">{{ data.NickName }}</p>
            <p class="fs-24  w400">{{ data.SelfIntroduce }}</p>
          </div>
        </div>
        <div class="pos-a top-24 z-out right-40">
          <div class="flex-d-c flex-center">
              <div class="m_logo" v-if="posterFormat.EnterpriseLogoShow"><img :src="shopLogo64" crossOrigin="anonymous"/></div>
              <p class="color-white pt-5 w144 fs-24" v-if="posterFormat.EnterpriseShow">{{data.ShopName}}</p>
          </div>
        </div>
        <p class="pos-a top-326 z-out left-40 fs-32 fw-500 w360 h143 cssjustify" :style="'color:' + fontColor">{{ copydesc }}</p>
        <div class="pos-a bottom-40 left-0 z-out" style="width:100%">
          <div class="flex-s-c mlr-40">
            <div>
              <div class="flex-v-c bgalpha">
                <div class="flex-d-c flex-center mr-20" v-if="posterFormat.AllSignInDateShow">
                  <p class="fs-24 fw-400">签到天数</p>
                  <span class="fs-24 fw-400"
                    ><span class="fs-48 fw-b">{{ data.SignCount }}</span> 天</span
                  >
                </div>
                <div class="flex-d-c flex-center" v-if="posterFormat.SignInDateShow">
                  <p class="fs-24 fw-400">今日签到</p>
                  <span class="fs-48 fw-b">{{ time ? time:currentTime }}</span>
                </div>
              </div>
              <div class="fs-24 fw-400 pl-32 pt-15">{{day}} {{week}}</div>
            </div>
            <img :src="bgewm?bgewm:ewm" class="ewm" crossOrigin="anonymous" :class="posterFormat.QrcodeType==1?'br2':''" v-if="posterFormat.QrcodeShow"/>
          </div>
        </div>
      </div>
      <!--板式 end-->
    </div>
    <!--选背景-->
    <div class="ptop pt-34 bg-white btlr-24 btrr-24">
      <div class="ptopmain" ref="scorrtop">
      <div class="pb-120" v-show="active == 1">
        <div class="plr-24">
          <div class="flex-v-c pb-22 flex-wrap of-y-s">
            <div class="flex-item mb-12 flex-d-c flex-s-c flex-one">
              <div class="flex-center pos-r">
                <SvgIcon icon-class="camera-1" class="fs-45" />
                <span class="ml-15 fs-28">相机图片</span>
                <van-uploader
                  :max-count="1"
                  :after-read="
                    file => {
                      afterRead(file)
                    }
                  "
                />
              </div>
              <div class="flex-center" @click="randomImg()">
                <SvgIcon icon-class="random" class="fs-45" @goPage="randomImg()" />
                <span class="ml-15 fs-28">随机图片</span>
              </div>
            </div>
            <div
              :class="bgActive == index ? 'flex-item bg_active mb-12 br-8' : 'flex-item mb-12 br-8'"
              v-for="(item, index) in bgList"
              :key="index"
            >
              <imgBox :img-url="item" @click="bgselect(index, item)" class="br-8" />
            </div>
          </div>
        </div>
      </div>
      <!--选文案-->
      <div class="pb-120" v-show="active == 2">
        <div class="plr-24">
          <div class="pb-22 of-y-s">
            <div class="flex-s-c posa bg-white z-out">
              <div class="flex-v-c">
                <div class="color_list">
                  <div
                    v-for="(item, index) in colorList"
                    :key="index"
                    @click="colorSelect(index, item)"
                    :style="colorActive == index ? 'border-color:' + item : ''"
                    :class="colorActive == index && item == '#ffffff' ? 'bor3' : ''"
                  >
                    <span :style="'background:' + item" :class="item == '#ffffff' ? 'borccc' : ''"></span>
                  </div>
                </div>
                <SvgIcon icon-class="right" class="fs-16" />
              </div>
              <div class="flex-v-c">
                <span class="fs-24 pr-20 copy-btn" style="color:#f7762c" :data-clipboard-text="copydesc" @click="copy">复制文案</span>
                <div class="copy flex-center z-out" @click="copyShow = true">
                  <SvgIcon icon-class="edit" @goPage="copyShow = true" class="fs-28" />
                  <span>自拟文案</span>
                </div>
              </div>
            </div>
            <div class="pt-60">
              <div class="flex-v-c" v-for="(item, index) in official" :key="index" @click="officialSel(index, item)">
                <img v-if="officialActive == index" class="img-icon" :src="activeIcon" />
                <img v-else class="img-icon" :src="inactiveIcon" />
                <p class="mtb-20 fs-28 pl-18 text-show-line-1" :class="officialActive == index?'':'officialcolor'">{{ item }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--选板式-->
      <div class="pb-120" v-show="active == 3">
        <div class="plr-24">
          <div class="flex-v-c b-22 flex-wrap of-y-s">
            <div
              @click="plateTypeSel(index + 1)"
              class="flex-item flex-item-height mb-12 br-8 pos-r"
              :class="plateTypeActive === index + 1 ? ' plate-type-active' : ''" v-for="(item, index) in plateType"
              :key="index"
            >
              <img v-if="plateTypeActive === index + 1" src="@/assets/images/p_active.png" class="p_active" />
              <img :src="item" />
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
    <!--footer-->
    <div class="footer flex-center flex z-out">
      <div class="flex-d-c flex-center pos-r" @click="tab(1)">
        <SvgIcon icon-class="bg" :class="active == 1 ? 'fs-32 icon active' : 'fs-32 icon'" />
        <span>选背景</span>
      </div>
      <div class="flex-d-c flex-center" @click="tab(2)">
        <SvgIcon icon-class="text" :class="active == 2 ? 'fs-32 icon active' : 'fs-32 icon'" />
        <span>选文案</span>
      </div>
      <div class="flex-d-c flex-center" @click="tab(3)">
        <SvgIcon icon-class="plate" :class="active == 3 ? 'fs-32 icon active' : 'fs-32 icon'" />
        <span>选版式</span>
      </div>
      <p class="flex-d-c flex-center copy-btn" :data-clipboard-text="pushContent" @click="replaceToImg">生成海报</p>
    </div>
    <!--footer end-->
    <van-dialog v-model="copyShow" :showConfirmButton="false" close-on-click-overlay>
      <div class="fs-34 ptb-40 flex-center">编辑文案</div>
      <van-field v-model="edit" rows="5" type="textarea" maxlength="50" class="textarea" placeholder="请输入文案内容..." />
      <div class="flex-s-c plr-60 ptb-40 fs-32">
        <div @click="copyShow = false">不写文案</div>
        <div class="confirm" @click="confirm">确定</div>
      </div>
    </van-dialog>
    <van-dialog v-model="posterShow" class="posterDiv color-white" :showConfirmButton="false">
      <div class="pos-r">
        <SvgIcon icon-class="close" class="fs-70 pos-a right--35 top--80 z-out" @goPage="posterShow = false" />
        <img v-show="replaceImg" :src="replaceImg" class="posterimg" />
        <div class="pt-20 fs-34 flex-center">文案已复制，长按图片保存或分享</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import imgBox from 'components/imgBox'
import Clipboard from 'clipboard'
import { GetPosterInfo,CreatePoster } from 'api/poster'
import activeIcon from 'assets/images/radioactive.png'
import inactiveIcon from 'assets/images/radio.png'
import plate_type1 from 'assets/images/plate-type-1.jpg'
import plate_type2 from 'assets/images/plate-type-2.jpg'
import plate_type3 from 'assets/images/plate-type-3.jpg'
import plate_type4 from 'assets/images/plate-type-4.jpg'
import plate_type5 from 'assets/images/plate-type-5.jpg'
import utils from 'utils/utils'
import { iosupLoad,upLoad } from 'api/upload'
import headPortraitBox from 'components/headPortraitBox'
import jrQrcode from "jr-qrcode";
import html2canvas from 'html2canvas'
export default {
  components: {
    SvgIcon,
    imgBox,
    Clipboard,
    headPortraitBox
  },
  data() {
    return {
      bgShowinfo:'',
      pushContent:'',
      shopLogo64:'',
      head64:'',
      ewm:'',
      bgewm:'',
      ewmShow:false,
      data: {},
      posterFormat: {},
      PosterBackgroundList: {},
      edit: '',
      time: '',
      week: '',
      day: '',
      posterShow: false,
      copyShow: false,
      active: 1,
      bgActive: 0,
      officialActive: -1,
      colorActive: 100,
      bgShow: '',
      fontColor: '',
      copydesc: '',
      TextId: '',
      SelfDesignText:'',
      plateTypeActive: 1,
      colorList: [
        '#ffffff',
        '#333333',
        '#E75E58',
        '#F5C543',
        '#57BE6A',
        '#4FABF8',
        '#6568E7',
        '#F6D399',
        '#f7762c',
        '#d37fff',
        '#56defb',
        '#d7b642'
      ],//字体颜色
      official: [],//文案列表
      PosterTextList:[],
      plateType: [plate_type1, plate_type2, plate_type3, plate_type4, plate_type5],//板式1-5静态图片
      bgList: [],//背景图片列表
      radio: '0',
      activeIcon: activeIcon,
      inactiveIcon: inactiveIcon,
      replaceImg: ''
    }
  },
  computed: {
    // 计算属性的 getter
  },
  created() {
    this.GetPosterInfo()
    this.day = utils.dateFomat('yyyy', new Date()) + '年' + utils.dateFomat('m', new Date()) + '月' + utils.dateFomat('d', new Date()) + '日'
    this.day1 = utils.dateFomat('yyyy', new Date()) + '.' + utils.dateFomat('m', new Date()) + '.' + utils.dateFomat('d', new Date())
    this.day5 = utils.dateFomat('yyyy', new Date()) + '.' + utils.dateFomat('m', new Date()) 
    this.daynum = utils.dateFomat('d', new Date())
    this.week = utils.getCurrentweek(new Date())
    let minute = utils.dateFomat('M', new Date());
    if(minute < 10){
      minute = '0'+minute;
    }
    this.currentTime = utils.dateFomat('H', new Date())+':'+minute;
  },
  methods: {
    copy() {
      const _this = this
      var clipboard = new Clipboard('.copy-btn')
      clipboard.on('success', e => {
        const instance = _this.$toast('复制成功')
        setTimeout(() => {
          instance.close()
        }, 2000)

        // 释放内存
        clipboard.destroy()
      })

      clipboard.on('error', e => {
        // 不支持复制
        const instance = _this.$toast('该浏览器不支持自动复制')
        setTimeout(() => {
          instance.close()
        }, 2000)

        // 释放内存
        clipboard.destroy()
      })
    },
    afterRead(file) {
      this.bgShow = file.content;
      // iosupLoad({
      //   Content: this.$utils.getCaption(file.content, 'base64,'),
      //   FileType: this.$utils.getCaption(file.file.type, '/'),
      //   IsCut:false
      // }).then(res => {
      //   console.log(res)
      //   if (res) {
      //     this.bgShow = res.Data.Path+'?x-oss-process=image/auto-orient,1'
      //   }
      // })
    },
    bgselect(index, item) {
      this.bgActive = index
      this.bgShow = this.$webInfo.ImgDomain+item
      this.bgShowinfo = this.PosterBackgroundList[this.bgActive].Content //海报文案
      this.copydesc = this.PosterBackgroundList[this.bgActive].TextContent;//背景标签文案
      this.TextId = this.PosterBackgroundList[this.bgActive].TextId;//背景标签文案ID
      this.SelfDesignText = ''
      if(this.PosterBackgroundList[this.bgActive].CodeUrl){//背景有带二维码
        this._creatQrCodebg(this.PosterBackgroundList[this.bgActive].CodeUrl)
      }else{
        this.bgewm = '';
      }
    },
    randomImg() {
      this.bgActive = parseInt(this.bgList.length * Math.random())
      console.log(this.bgActive)
      this.bgShow =this.$webInfo.ImgDomain+this.bgList[this.bgActive]
      this.bgShowinfo =this.PosterBackgroundList[this.bgActive].Content //海报文案
      this.copydesc = this.PosterBackgroundList[this.bgActive].TextContent;//背景标签文案
      this.TextId = this.PosterBackgroundList[this.bgActive].TextId;//背景标签文案ID
      this.SelfDesignText = ''
      if(this.PosterBackgroundList[this.bgActive].CodeUrl){//背景有带二维码
        this._creatQrCodebg(this.PosterBackgroundList[this.bgActive].CodeUrl)
      }else{
        this.bgewm = '';
      }
    },
    officialSel(index, item) {
      this.officialActive = index
      this.copydesc = item
      this.TextId = this.PosterTextList[index].ID
    },
    plateTypeSel(index) {
      this.$toast.loading({
        message: '请稍候...',
        loadingType: 'spinner',
        duration: 1000
      })
      setTimeout(() => {
        this.plateTypeActive = index;
      },800)
    },
    radiosel(callback) {
      console.log(callback)
    },
    tab(num) {
      this.$refs.scorrtop.scrollTop = 0
      this.active = num
    },
    colorSelect(index, color) {
      this.colorActive = index
      this.fontColor = color
      console.log(index)
    },
    confirm() {
      if (!this.edit) {
        this.$toast('请输入文案内容')
        return
      }
      this.SelfDesignText = this.edit;
      this.copydesc = this.edit
      this.edit = '';
      this.TextId = 0;

      // this.officialActive = -1;
      this.copyShow = false
    },
    replaceToImg() {
      this.$toast.loading({
        message: 'loading...',
        loadingType: 'spinner',
        duration: 0
      })
      if(this.posterFormat.PushContent){
        var pushContent = this.posterFormat.PushContent;
        pushContent = pushContent.replace(/{日期}/, this.day)
                                .replace(/{时间}/, this.currentTime)
                                .replace(/{星期}/, this.week)
                                .replace(/{打卡天数}/, this.data.SignCount)
                                .replace(/{文案内容}/, this.copydesc)
                                .replace(/{称呼}/, this.data.NickName)
                              if(this.bgShowinfo){
                                pushContent = pushContent.replace(/{海报内容}/, this.bgShowinfo)
                              }else{
                                pushContent = pushContent.replace(/\n{海报内容}/,'')
                              }
        this.pushContent = pushContent;
        const _this = this
        var clipboard = new Clipboard('.copy-btn')
        clipboard.on('success', e => {
          // 释放内存
          clipboard.destroy()
        })

        clipboard.on('error', e => {
          // 不支持复制
          const instance = _this.$toast('该浏览器不支持自动复制')
          setTimeout(() => {
            instance.close()
          }, 2000)

          // 释放内存
          clipboard.destroy()
        })
      }

      let imgContent;
      if(this.plateTypeActive == 1){
        imgContent =this.$refs.imgContent1;
      }else if(this.plateTypeActive == 2){
        imgContent =this.$refs.imgContent2;
      }else if(this.plateTypeActive == 3){
        imgContent =this.$refs.imgContent3;
      }else if(this.plateTypeActive == 4){
        imgContent =this.$refs.imgContent4;
      }else if(this.plateTypeActive == 5){
        imgContent =this.$refs.imgContent5;
      }
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      let width;
      let height;
      if (this.plateTypeActive == 4 || this.plateTypeActive == 5) {
        width = imgContent.clientWidth * 0.936
        height = imgContent.clientHeight * 0.936
      } else {
        width = imgContent.clientWidth * 0.67
        height = imgContent.clientHeight * 0.67
      }
      this.$nextTick(()=>{
        setTimeout(() => {
          html2canvas(imgContent, {
            backgroundColor: null,
            allowTaint: true,
            logging: true, // 日志开关，便于查看html2canvas的内部执行流程
            width: width, // dom 原始宽度
            height: height,
            scrollY: 0,
            scrollX: 0,
            useCORS: true // 图片跨域
          }).then(canvas => {
            const url = canvas.toDataURL('image/png').replace("image/png","image/octet-stream");
            this.replaceImg = url
            // this.$toast.clear()
            this._CreatePoster(url);
          }).catch(error => {
            console.error('html2canvas 错误:', error);
          });
        }, 1000)
      });
    },
    _CreatePoster(url){
      upLoad({
        Content: this.$utils.getCaption(url, 'base64,'),
        FileType: this.$utils.getCaption('png', '/')
      }).then(res => {
        if (res) {
          let imgUrl = res.Data.FullPath;
          CreatePoster({imageUrl:imgUrl,Copywriting:this.pushContent,TextId:this.TextId,SelfDesignText:this.SelfDesignText}).then(res => {
            this.posterShow = true;
          })
        }
      })
      
    },
    _creatQrCode(url) {
        this.$nextTick(()=>{
          let imgBase64 = jrQrcode.getQrBase64(url, {//生成二维码
            padding       : 0,   // 二维码四边空白（默认为10px）
            width         : 140,  // 二维码图片宽度（默认为256px）
            height        : 140,  // 二维码图片高度（默认为256px）
            correctLevel  : QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
            reverse       : false,        // 反色二维码，二维码颜色为上层容器的背景颜色
            background    : "#ffffff",    // 二维码背景颜色（默认白色）
            foreground    : "#000000"     // 二维码颜色（默认黑色）
          });  //options为配置对象，支持以下配置参数：
          this.ewm = imgBase64;
        })
    },
    _creatQrCodebg(url) {
        this.$nextTick(()=>{
          let imgBase64 = jrQrcode.getQrBase64(url, {//生成二维码
            padding       : 0,   // 二维码四边空白（默认为10px）
            width         : 140,  // 二维码图片宽度（默认为256px）
            height        : 140,  // 二维码图片高度（默认为256px）
            correctLevel  : QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
            reverse       : false,        // 反色二维码，二维码颜色为上层容器的背景颜色
            background    : "#ffffff",    // 二维码背景颜色（默认白色）
            foreground    : "#000000"     // 二维码颜色（默认黑色）
          });  //options为配置对象，支持以下配置参数：
          this.bgewm = imgBase64;
        })
    },
    imageUrlToBase64(img,num) {
      var that = this;
      // 一定要设置为let，不然图片不显示
      let image = new Image();
      // 解决跨域问题
      image.setAttribute('crossOrigin', 'anonymous');
      let imageUrl = img;
      image.src = imageUrl;
      // image.onload为异步加载
      image.onload = () => {
        let canvas = document.createElement('canvas');
          canvas.width = image.width;
          canvas.height = image.height;
          let context = canvas.getContext('2d');
          context.drawImage(image, 0, 0, image.width, image.height);
          let quality = 0;
          // 这里的dataurl就是base64类型
          let dataURL = canvas.toDataURL('image/png', quality);
          if(num==1){
            that.shopLogo64 = dataURL      
          }
          if(num==2){
            that.head64 = dataURL      
          }
          if(num==3){
            that.ewm = dataURL
          }
      };
    },
    GetPosterInfo() {
      GetPosterInfo().then(res => {
        if (res) {
          let data = JSON.parse(JSON.stringify(res.Data))
          this.data = data;
          if(data.SignTime){
            this.time = data.SignTime.substring(data.SignTime.length-3,data.SignTime.length-8);
          }
          this.posterFormat = data.PosterFormat;
          this.PosterTextList = data.PosterTextList;
          data.PosterTextList.forEach((item,index) => {
            this.official.push(item.Content)
            // if(item.IsCheck){
            //   this.officialActive = index
            // }
          })
          this.PosterBackgroundList = data.PosterBackgroundList;
          // this.copydesc = this.official[this.officialActive] //选中IsCheck文案
          data.PosterBackgroundList.forEach((item,index) => {
            this.bgList.push(item.Image)
            if(item.IsCheck){
              this.bgActive = index
            }
          })
          this.bgShow =this.$webInfo.ImgDomain+this.bgList[this.bgActive] //选中IsCheck背景
          this.copydesc = data.PosterBackgroundList[this.bgActive].TextContent;//背景标签文案
          this.TextId = data.PosterBackgroundList[this.bgActive].TextId;//背景标签文案ID
          this.bgShowinfo =data.PosterBackgroundList[this.bgActive].Content //海报文案
          if(data.PosterFormat.QrcodeShow){//显示二维码 0公众号 1普通二维码
            if(data.PosterFormat.QrcodeType==1){
              this.$nextTick(() => {
                this._creatQrCode(data.PosterFormat.QrcodeUrl)
              })
            }else{
              this.imageUrlToBase64(data.PosterFormat.QrcodeUrl,3)//二维码
            }
          }

          // this.CodeUrl = 
          this.imageUrlToBase64(this.$webInfo.ImgDomain+data.ShopLogo,1)//企业图
          let imgSrc = data.Images;
          if (!imgSrc) {
            imgSrc = require('@/assets/images/no-img.jpg')
            this.imageUrlToBase64(imgSrc,2)
          } else if (imgSrc.indexOf('http') === -1) {
            this.imageUrlToBase64(this.$webInfo.ImgDomain+imgSrc,2)
          }else{
            this.imageUrlToBase64(imgSrc,2)//头像11111
          }
          if(this.PosterBackgroundList[this.bgActive].CodeUrl){//背景有带二维码
            this._creatQrCodebg(this.PosterBackgroundList[this.bgActive].CodeUrl)
          }
        }
      })
    }
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.officialcolor{
  color: #999999;
}
.posa{
  position:absolute;
  width: calc(100% - 48px);
  margin-top: -1px;
}
.h143 {
  max-height: 143px;
  overflow: hidden;
}
.h96 {
  max-height: 96px;
  overflow: hidden;
}
.w144{
  max-width: 144px;
  text-align: center;
}
.h129 {
  height: 129px;
  overflow: hidden;
}
.ptop {
  // padding-top: 755.76px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 780px;
  height: calc(100% - 780px);
}
.ptopmain{
  width: 100%;
  height: calc(100%);
  overflow-y: scroll;
}
.fixation {
  width: 100%;
  height: 1128px;
  position: fixed;
  margin-top: -166.12px;
  background: #e5e5e5;
  overflow: hidden;
  font-variant: normal;
  font-family: sans-serif;
}
.fixation3 {
  width: 100%;
  height: 1128px;
  position: fixed;
  margin-top: -160px;
  background: #e5e5e5;
  overflow: hidden;
  font-family: sans-serif;
}
.fixation1 {
  height: 1128px;
  position: fixed;
  background: #e5e5e5;
  overflow: hidden;
  font-family: sans-serif;

}
.back-icon {
  position: fixed;
  top: 15px;
  left: 24px;
}
.m-bg {
  background: #e5e5e5;
  // position: -webkit-sticky;
  // position: -moz-sticky;
  // position: -ms-sticky;
  // position: sticky;
}
.signin_time {
  width: 500px;
  height: 110px;
  border-top: 1px solid #F6D399;
  border-bottom: 1px solid #F6D399;
  padding: 2px 0;
  .flex-s-c{
    height: 100%;
    border-top: 4px solid #F6D399;
    border-bottom: 4px solid #F6D399;
    div{
        align-items: baseline;
    }
  }

}
.ewm {
  width: 120px;
  height: 120px;
}
.br2{
  border:2px solid #ffffff;
}
.ewm2 {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  margin-left: 30px;
}
.m_logo {
  width: 80px;
  height: auto;
}
.flex-item {
  width: 226px;
  height: 226px;
  margin-right: calc((100% - (226px * 3)) / 2);
  overflow: hidden;
  &:nth-child(3n) {
    margin-right: 0;
  }
}
.bgborer {
  border: 2px solid transparent;
}
.bg_active {
  border: 2px solid #f7762c;
}
.flex-item-height {
  height: auto;
  border: 2px solid #333333;
  .p_active {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
}
.plate-type-active {
  border-color: #f7762c;
}
.user {
  background: rgba(255, 255, 255, 0.6);
  height: 130px;
  margin-top: -130px;
}
.footer {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 0;
  height: 120px;
  background: #ffffff;
  justify-content: space-around;
  p {
    width: 188px;
    height: 72px;
    background: linear-gradient(125deg, #ffb57a, #fe9d6e);
    border-radius: 36px;
    color: #fff;
  }
  span {
    padding-top: 12px;
  }
  .icon {
    color: #000;
  }
  .active {
    color: #f7762c;
  }
  .active + span {
    color: #f7762c;
  }
  svg {
    position: relative;
    z-index: -1;
  }
}

.flex-one {
  div {
    width: 226px;
    color: #fff;
    height: 107px;
    background: linear-gradient(-45deg, #7771e6, #8398ee);
    border-radius: 8px;
    .van-uploader {
      width: 100%;
      height: 100%;
      overflow: hidden;
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  div:last-child {
    background: linear-gradient(-45deg, #ff3465, #ff9278);
  }
}
.copy {
  width: 172px;
  height: 60px;
  border: 1px solid #f7762c;
  border-radius: 30px;
  color: #f7762c;
  svg {
    position: relative;
    z-index: -1;
  }
}
.color_list {
  width: 380px;
  overflow: auto;
  display: flex;

  div {
    border: 1px solid transparent;
    border-radius: 50%;
    width: 43px;
    height: 43px;
    margin-right: 22px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: block;
    }
    .borccc {
      border: 1px solid #ccc;
    }
  }
  .bor3 {
    border: 1px solid #333 !important;
  }
}
.color_list::-webkit-scrollbar{
  display: none;
}
.confirm {
  width: 220px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: linear-gradient(125deg, #ffb57a, #fe9d6e);
  border-radius: 40px;
}
.img-icon {
  width: 28px;
  height: 28px;
}
.scale {
  -webkit-transform: scale(0.67);
  -moz-transform: scale(0.67);
  transform: scale(0.67);
}
.scale1 {
  -webkit-transform: scale(0.936);
  -moz-transform: scale(0.936);
  transform: scale(0.936);
}
.boxshaw {
  box-shadow: 0px 0px 20px #e6e6e6
}
.frame {
  border: 1px solid #fff;
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 1;
}
.user1 {
  height: 130px;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
}

.w500 {
  width: 500px;
}
.w360 {
  width: 360px;
}
.w670 {
  width: 710px;
}
.w400 {
  width: 400px;
}
.sign_in3 {
  width: 172px;
  background: #f6d399;
  border-radius: 6px;
}
.line {
  width: 80%;
  height: 1px;
  background: #333333;
}
.time3 {
  width: 310px;
  display: flex;
  background: #33353b;
  border: 1px solid #33353b;
  color: #fff;
  padding-left: 15px;
  height: 54px;
  justify-content: space-between;
  align-items: center;
  span {
    display: flex;
    align-items: center;
    background: #fff;
    color: #33353b;
    height: 50px;
    padding: 0 10px;
    margin-left: 8px;
  }
}
.bd-white {
  border: 1px solid #fff;
}
.shade {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9;
  background: rgba($color: #000000, $alpha: 0.1);
}
.date5 {
  width: 172px;
  height: 208px;
  border: 1px solid #fff;
  border-top: none;
  div {
    text-align: center;
    width: 100%;
  }
  div:first-child {
    border-bottom: 1px solid #fff;
  }
}
.bgalpha {
  & > div {
    width: 152px;
    height: 152px;
    border-radius: 50%;
    background: rgba($color: #ffffff, $alpha: 0.2);
  }
}
.plate_type_bg1 {
  width: 666px;
  height: 666px;
  display: flex;
  align-items: center;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
  }
}
.plate_type_bg2 {
  width: 750px;
  height: 750px;
  display: flex;
  align-items: center;
  overflow: hidden;
  img {
    width: 100%;
  }
}
.plate_type_bg3 {
  width: 710px;
  height: 710px;
  display: flex;
  align-items: center;
  overflow: hidden;
  img {
    width: 100%;
  }
}
.posterDiv {
  width: 600px;
  background: none;
  overflow: visible;
  top: 50%;
}
.posterimg {
  width: 100%;
  background: transparent!important;
  // border-radius: 16px;
}
.time4{
  text-align: center;
  width: 140px;
  padding: 0 10px;
  height: 152px;
  background: rgba($color: #ffffff, $alpha: 0.2);
  border-radius: 0px 0px 20px 20px ;
}
.bb-white{
  border-bottom: 1px solid #ffffff;
  margin-top: -15px;
  padding-bottom: 5px;
  margin-bottom: 6px;
}
.textarea  {
  /deep/ textarea{
  border: 1px solid #999999;
  border-radius: 16px;
  outline: none;
  padding: 24px;
  -webkit-appearance: none;
  -webkit-user-select: auto;
  }
}
.cssjustify{
  word-wrap: break-word;
  box-sizing: content-box;
  text-align: justify;
}
.lineheight1{
  line-height: 1;
}
</style>

